<template>
  <div class="main_back">
    <div class="left_part">
      <!-- 消防巡查记录 -->
      <div class="model_part" style="height: 640px">
        <p class="text-title-label">实时消防巡查记录</p>
        <div style="height: 250px">
          <LineChart></LineChart>
        </div>
        <div class="fl_lr" style="margin-bottom: 20px">
          <div
            :class="isDay ? 'activeBtn' : 'unActiveBtn'"
            style="margin-right: 20px"
            @click="openDay"
          >
            消防日巡查记录
          </div>
          <div :class="!isDay ? 'activeBtn' : 'unActiveBtn'" @click="openMonth">
            消防月巡查记录
          </div>
        </div>
        <scrolltable
          :key="isDay"
          :data="recordTableData.data"
          height="290px"
          :column="recordTableData.column"
          :headerStyle="recordTableData.headerStyle"
          :columnStyle="recordTableData.columnStyle"
        ></scrolltable>
      </div>
      <!-- 机构实时监测 -->
      <div class="model_part" style="height: 258px">
        <p class="text-title-label">机构实时监控</p>
        <div class="video_awarm">
          <div
            v-for="(item, index) in vedioList"
            :key="index"
            style="width: 49%"
          >
            <VideoItem :data="item"></VideoItem>
          </div>
        </div>
      </div>
    </div>
    <div class="map_data">
      <MapMain api="orderList" :onlyMap="true"></MapMain>
    </div>
    <div class="right_data">
      <!-- 实时服务工单 -->
      <div class="model_part" style="height: 322px; margin-bottom: 30px">
        <p class="text-title-label">实时服务工单</p>
        <div class="oredr_conten">
          <div
            v-for="item in OrderServiceData"
            :key="item.id"
            class="oredr_item"
          >
            <OrderItem
              :data="item"
              @dialogClose="dialogClose"
              @dialogOpen="dialogOpen"
            ></OrderItem>
          </div>
        </div>
      </div>
      <div class="fl_lr two_part" style="height: 200px; margin-bottom: 20px">
        <!-- 入户核查汇总 -->
        <div class="" style="width: 59%">
          <!-- <p class="text-title-label">各区入户核查汇总（万人）</p> -->
          <p class="text-title-label">各区入户核查占比</p>
          <!-- <BarChart></BarChart> -->
          <AplidCharts
            ref="chartEl1"
            :option="pieChartConfig()"
            style="width: 100%; height: 100%"
          ></AplidCharts>
        </div>
        <!-- 入户核查满意度 -->
        <div class="" style="width: 39%">
          <p class="text-title-label">入户核查满意度</p>
          <PieChart></PieChart>
        </div>
      </div>
      <!-- 线上核查工单 -->
      <div class="model_part" style="height: 280px">
        <p class="text-title-label">线上核查工单</p>
        <scrolltable
          :data="onlineCheckData.data"
          height="260px"
          :column="onlineCheckData.column"
          :headerStyle="onlineCheckData.headerStyle"
          :columnStyle="onlineCheckData.columnStyle"
        ></scrolltable>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import scrolltable from "@/views/Home2/components/scrollTablePart/index.vue";
import VideoItem from "@/views/Home2/components/video/index.vue";
import OrderItem from "@/views/Home2/components/order/index.vue";
import LineChart from "@/views/Home2/components/lineChart/index.vue";
import BarChart from "@/views/Home2/components/barChart/index.vue";
import PieChart from "@/views/Home2/components/pieChart/index.vue";
import MapMain from "@/views/aplid/MapMain/index.vue";
import { useRequestData } from "@/views/Home2/hooks/useRequestData";
import { useIntervalFn } from "@vueuse/core";
import { pieChartConfig } from "./config";
let {
  getDayCheckData,
  getMonthCheckData,
  getOrderServiceData,
  getOnlineCheckOrderData,
} = useRequestData();

let isDay = ref(true);

const openDay = () => {
  isDay.value = true;
  getDayCheckData().then((res) => {
    res.forEach((el) => {
      el.create_time = el.create_time.slice(6);
    });
    recordTableData.value.data = res;
  });
};
const openMonth = () => {
  isDay.value = false;
  getMonthCheckData().then((res) => {
    res.forEach((el) => {
      el.create_time = el.create_time.slice(6);
    });
    recordTableData.value.data = res;
  });
};
let vedioList = ref([
  {
    title: "秦淮区-悦心老年公寓-厨房",
    src: "http://hls01open.ys7.com/openlive/1bced51ae9bc4463bf1b6133ae5a33e5.m3u8",
  },
  {
    title: "秦淮区-福乐老年公寓-大门",
    src: "https://hls01open.ys7.com/openlive/e8defe05562a439d9f756e664c85edbc.m3u8",
  },
]);
let orderList = ref([{}]);
let recordTableData = ref({
  column: [
    {
      label: "所属地区",
      prop: "area_name",
    },
    {
      label: "机构名称",
      prop: "organization_name",
      transverse: true,
    },
    {
      label: "巡查日期",
      prop: "create_time",
      transverse: true,
    },
    {
      label: "巡查内容",
      prop: "inspection_content_label",
      transverse: true,
    },
    {
      label: "巡查人",
      prop: "staff_name",
    },
    {
      label: "巡查结果",
      prop: "is_patrol_label",
    },
  ],
  data: [],
  headerStyle: {
    textAlgin: "center",
    backgroundColor: "rgba(21, 77, 160, 0.2)",
    color: "rgba(216, 240, 255, 1)",
  },
  columnStyle: {
    height: "30px",
    backgroundColor: "rgba(22, 200, 255, 0.2)",
    color: "rgba(216, 240, 255, 1)",
    textAlgin: "center",
  },
});
let onlineCheckData = ref({
  column: [
    {
      label: "姓名",
      prop: "service_object_name",
      width: "50px",
    },
    {
      label: "服务地址",
      prop: "address",
      transverse: true,
      width: "64px",
    },
    {
      label: "服务内容",
      prop: "service_item_name",
      transverse: true,
      width: "64px",
    },
    {
      label: "服务人员",
      prop: "waiter_service_name",
      width: "64px",
    },
    {
      label: "回访客服",
      prop: "creator_name",
      width: "64px",
    },
    {
      label: "状态",
      prop: "status",
      width: "50px",
    },
    {
      label: "次数",
      prop: "number",
      width: "50px",
    },
    {
      label: "接听类型",
      prop: "appraise",
      width: "64px",
    },
  ],
  data: [],
  headerStyle: {
    textAlgin: "center",
    backgroundColor: "rgba(21, 77, 160, 0.2)",
    color: "rgba(216, 240, 255, 1)",
  },
  columnStyle: {
    height: "30px",
    color: "rgba(216, 240, 255, 1)",
    backgroundColor: "rgba(22, 200, 255, 0.2)",
    textAlgin: "center",
  },
});
// 服务工单
let OrderServiceData = ref([]);
let orderDsq = null;
let pause = () => {};
let resume = () => {};
let isActive = false;
getOrderServiceData().then((res) => {
  OrderServiceData.value = res.slice(0, 4);
  //循环展示
  let length = res.length;
  let sheng = length % 4;
  let zhu = length / 4;
  if (sheng != 0) {
    let newZhu = zhu + 1;
  }
  let i = 4;
  let count = 0;
  if (length > 4) {
    orderDsq = useIntervalFn(() => {
      if (i >= length) {
        i = 0;
      } else {
        OrderServiceData.value = res.slice(i, i + 4);
        if (OrderServiceData.value.length < 4) {
          OrderServiceData.value = [
            ...OrderServiceData.value,
            ...res.slice(0, 4 - OrderServiceData.value.length),
          ];
          i = 4 - OrderServiceData.value.length;
          return;
        }
        i += 4;
        count += 1;
      }
    }, 4000);
    pause = orderDsq.pause;
    resume = orderDsq.resume;
    isActive = orderDsq.isActive;
  }
});
// 线上核查工单
getOnlineCheckOrderData().then((res) => {
  res.forEach((el) => {
    el.appraise = "满意";
  });
  onlineCheckData.value.data = res;
});
// 工单打开弹窗
const dialogOpen = () => {
  pause();
};
// 工单关闭弹窗
const dialogClose = () => {
  resume();
};

onMounted(() => {
  openDay();
});
onUnmounted(() => {
  // clearInterval(orderDsq)
});
</script>

<style lang="scss" scoped>
.oredr_conten {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
}

.oredr_item {
  height: 49%;
  width: 49%;
  background-color: #092a3caa;
}

.video_awarm {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.activeBtn {
  width: 171px;
  height: 32px;
  background-color: #0c3c54;
  filter: glow(color=#0C3C54, strength=15);
  font-weight: 400;
  font-size: 18px;
  text-align: center;
  line-height: 32px;
  border-radius: 5px;
}

.unActiveBtn {
  width: 171px;
  height: 32px;
  background-color: #0a2b3f;
  font-weight: 400;
  color: #808990;
  font-size: 18px;
  text-align: center;
  line-height: 32px;
  border-radius: 5px;
}

.fl_lr {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.model_part {
  padding: 10px 18px 10px 18px;
  box-sizing: border-box;
  background-image: url("@/assets/imgs/tou-ming-back.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.two_part {
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  background-image: url("@/assets/imgs/tou-ming-back.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.main_back {
  // height: calc(100vh - 169px);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0px 20px 79px 20px;
  box-sizing: border-box;

  .left_part {
    height: 840px;
    width: calc((100% - 550px - 30px) / 2);
  }

  .map_data {
    // flex: 1;
    width: 800px;
  }

  .right_data {
    height: 840px;
    width: calc((100% - 550px - 30px) / 2);
  }
}

.text-title-label {
  font-family: "Microsoft YaHei Bold";
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.1px;
  text-align: left;
  color: #fff;
  position: relative;
  height: 33.74px;
  line-height: 33.74px;
  padding-left: 36px;
  z-index: 0;

  &::after {
    content: "";
    width: 100%;
    height: 100%;
    background: url("@/assets/imgs/icon-big-label.webp") no-repeat;
    background-size: cover;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
  }
}
</style>
